<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="categoryType" value="${param.categoryType}" />
<c:set var="language" value="${param.language}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>產品與服務</title>
  <script type='text/javascript' src="${ctx}/extends/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
	var ctx = "${ctx}";
	var language = "${language}";
	var categoryType = "${categoryType}";
	$.ajaxSetup({ cache: false });
	
	$(document).ready(function(e) {
        $("td.tdstyle").mouseover(function(e) {
            $(this).addClass("td_over");
        });
		$("td.tdstyle").mouseout(function(e) {
            $(this).removeClass("td_over");
        });
    });		
  </script>          
  
  <style type="text/css">
    html {
		height:100%;
	}
    body {
		background:url(${ctx}/pages/web/res/bg.png) center repeat-y;
		font-family:"宋体";
		text-align:center;
		margin:0;
		padding:0;
		border:0 none;
	}
	div#container {
		margin:0 auto;
		border:0 none;
		padding:0;
		text-align:left;
		width:1024px;
	}
	div#nav {
		float:left;
		margin:0 auto;
		padding-top:30px;
		border:0 none;
		width:160px;
	}
	div#content {
		margin:0;
		padding-left:180px;
		padding-top:0;
		border:none;
		min-height:550px;
	}
	div#navigator {
		background:url(${ctx}/pages/web/res/navigator.png) center no-repeat;
		width:1024px;
		height:115px;
	}
	div#navigator ul {
		float:left;
		margin-left:350px;
		margin-top:-37px;
	}
	div#navigator ul li {
		float:left;
		text-align:center;
		list-style-type:none;
		margin:0;
		width:100px;
		border-left:#177b95 1px dotted;
	}
	div#navigator ul li a{
		text-decoration:none;
		color:#666666;
	}
	div#navigator ul li a:hover{
		text-decoration:none;
		color:#177b95;
	}	
	div#footer {
		position:relative;
		background:url(${ctx}/pages/web/res/foot.png) center no-repeat;
		color:#666666;
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		width:1024px;
		height:85px;
		min-height:86px;
	}
	div#nav ul {
		width:160px;
		padding:0;
		margin:0;
	}
	li {
		list-style-type:none;
		padding:0;
		margin:0;
	}
	a {
		text-decoration:none;
	}
	div#tool {
		float:right;
		margin-top:5px;
		width:740px;
	}
	div#detail {
		clear:both;
		background:url(${ctx}/pages/web/res/product_parameter.png) top center no-repeat;
		padding-top:5px;
		text-align:left;
	}
	.sub {
		display:none;
		margin:0;
		padding:0;
		border:0 none;
	}
	.displaySub {
		display:block;
		margin:0;
		padding:0;
		border:0 none;		
	}
	.menu {
		background-image:url(${ctx}/pages/web/res/product_li_selected.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-top:12px;
		padding-left:25px;
		font-family:"宋体";
		font-size:14px;
		color:#0d3b43;
		cursor:pointer;
		width:160px;
		height:33px;
	}
	.subMenu {
		padding:10px 0 10px 25px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666666;
		cursor:pointer;
	}
    .product {
		float:left;
		background:url(${ctx}/pages/web/res/product_bg.png) left no-repeat;
		margin-left:25px;
		cursor:pointer;
		width:360px;
		height:265px;
	}
    .desc {
		font-size:12px;
		color:#996633;
		margin:0 0 0 15px;
		padding-top:20px;
	}
	.title {
		font-size:18px;
		color:#666666;
		margin:7px 0 0 15px;
		padding:0;
		cursor:pointer;
	}	
	.over {
		color:#15647a;
	}
	.down {
		color:#15647a;
	}
	.out {
		color:#666666;
	}
	.td_over {
		border:#0FF 1px solid;
	}
	.tdstyle {
		text-align:center;
		width:120px;
		height:62.5px;
	}
	.model {
		margin:0;
		padding:0;
		font-size:12px;
		font-family:"宋体";
		color:#15647a;
		text-indent:20px;
	}
	.remark {
		margin:0;
		padding:0;
		font-family:"宋体";
		font-size:12px;
		color:#666666;
		text-indent:20px;
	}
	.productName {
		font-family:Arial, Helvetica, sans-serif;
		font-size:25px;
		color:#666666;
		text-indent:5px;
	}	
  </style>
</head>

<body>
  <div id="container">
    <div id="navigator">
      <div style="margin-left:115px; width:155px; height:85px; cursor:pointer;"></div>    
      <ul>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a href="${ctx}/pages/web/news/newsList.jsp?language=${language}">新聞動態</a>
            </c:when>
            <c:otherwise>
			  <a href="${ctx}/pages/web/news/newsList.jsp?language=${language}">d-News</a>
            </c:otherwise>
          </c:choose>         
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a id="nav_product" href="${ctx}/pages/web/product/product.jsp?categoryType=1&language=${language}">產品服務</a>
            </c:when>
            <c:otherwise>
			  <a id="nav_product" href="${ctx}/pages/web/product/product.jsp?categoryType=1&language=${language}">d-Concept</a>
            </c:otherwise>
          </c:choose>         
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a id="nav_case" href="${ctx}/pages/web/case/case.jsp?language=${language}">作品集</a>
            </c:when>
            <c:otherwise>
			  <a id="nav_case" href="${ctx}/pages/web/case/case.jsp?language=${language}">Gallery</a>
            </c:otherwise>
          </c:choose>         
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a id="nav_about" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=1">關於我們</a>
            </c:when>
            <c:otherwise>
			  <a id="nav_about" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=1">d-Magic</a>
            </c:otherwise>
          </c:choose>         
        </li>
        <li style="border-right:#177b95 1px dotted;">
          <c:choose>
            <c:when test="${language eq 2}">
              <a id="nav_contact" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=0">聯繫我們</a>
            </c:when>
            <c:otherwise>
			  <a id="nav_contact" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=0">Contact</a>
            </c:otherwise>
          </c:choose>        
        </li>
      </ul>
    </div>
  
    <div id="nav"><ul id="category"><ul></div>
    <div id="content">
        <div id="productList" style="display:none; padding-top:25px"></div> 
        
        <div id="productDetail" style="padding-top:35px; width:740px; display:none">
          <div id="product_parameter">
            <table cols="3" width="736" height="50" border="1" bordercolor="#0e4757" style="border-collapse:collapse">
              <tr>
                <td id="model" width="160" height="25" class="model">
                  <c:choose>
                    <c:when test="${language eq 1}">Product Model:</c:when>
                    <c:otherwise>產品編號：</c:otherwise>
                  </c:choose>
               </td>
                <td id="modelText" width="380" height="25" class="model">OKKKKKs</td>
                <td rowspan="2" class="productName">KD-HDDA1X8</td>
              </tr>
              <tr>
                <td colspan="2" width="540" height="25" class="remark">1路HDMI/DVI輸入8路HDM/DVI輸出分配放大器</td>
              </tr>                            
            </table>
            <div style="margin:-2px 0 0 -2px;"><img src="${ctx}/pages/web/res/product_parameter.png" width="742" /></div>
            <table width="736" height="250" cols="2" border="1" bordercolor="#0e4757" style="border-collapse:collapse; margin-top:-2px">
              <tr>
                <td id="big" rowspan="4" style="text-align:center" width="600px" height="250px"></td>
                <td id="samll_1" class="tdstyle"></td>
              </tr>          
              <tr>
                <td id="samll_2" class="tdstyle"></td>
              </tr>
              <tr>
                <td id="samll_3" class="tdstyle"></td>
              </tr>
              <tr>
                <td id="samll_4" class="tdstyle"></td>
              </tr>  
            </table>
          </div>
          <div id="tool">
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/5.png" alt="分享到QQ空间" onClick="shareQzone('', '' , '', '', '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/4.png" alt="分享到人人网" onClick="shareRR('', '' , '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/3.png" alt="分享到百度空间" onClick="shareKX('', '' , '')"/>
            </p>      
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/2.png" alt="分享到腾讯微博" onClick="shareToWb('', '' , '', '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/1.png" alt="分享到新浪微博" onClick="shareTSina('', '' , '', '')"/>
            </p>
            <p style="float:right; font:'宋体'; font-size:14px; color:#15647a; padding-top:8px;">分享至：</p> 
            <span style="float:right; padding:12px;"><img src="${ctx}/pages/web/res/downIcon.png" alt="文件下載" /></span>
            <p style="float:right; font:'宋体'; font-size:12px; color:#15647a; padding-top:10px;">文件下載</p> 
          </div>
          <div id="detail"><p style="color:#666666">詳細信息</p></div>        
        </div>
    </div>
    
    <div id="page" style="list-style:none; clear:both; width:1024px; height:20px;">
      <table id="tb_page" cols="8" style="text-align:center; margin:0 auto;">
        <tr id="tr_page">
          <td>&lt;</td>
          <td><a href="#" title="1">1</a></td>
          <td><a href="#" title="2">2</a></td>
          <td><a href="#" title="3">3</a></td>
          <td><a href="#">4</a></td>
          <td><a href="#">5</a></td>
          <td>...</td>
          <td><a href="#">11</a></td>
          <td>&gt;</td>
       </tr>
      </table>
    </div>   
      
    <div id="footer">
      <p style="padding-top:45px">copyright(c)2013 d-magic co.,ltd.   All right reserved.design b</p>
    </div>    
  </div>
</body>
<script type="text/javascript" src="${ctx}/extends/jquery.json-2.3.js?_=${radom}"></script>
<script type='text/javascript' src="${ctx}/pages/web/share.js"></script>
<script type="text/javascript" src="${ctx}/pages/web/product/product.js"></script>
<script type="text/javascript">
    $("#nav_product").css("color","#177b95");
	$("#navigator div").click(function(e) {
        window.location = ctx + "/pages/web/index.jsp";
    });  
</script>
</html>
